
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
    <script src="./turf.min.js"></script>
    <script src="./measureVolume.js"></script>
    <script src="./jquery-1.8.3.min.js"></script>
    <style>
        #menu {
            position: absolute;
            top: 20px;
            left: 20px;
            padding: 10px;
            background: #72a8eafa;
            border-radius: 3px;
            border: 1px solid rgba(128, 128, 128, 0.5);
            color: #ffffff;
            background: rgba(0, 0, 0, 0.4);
            box-shadow: 0 3px 14px rgba(128, 128, 128, 0.5);
            z-index: 9999;
        }
    </style>
</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

    <div id="menu">
        <p>
            <button onclick="load()">绘制</button>
            <button onclick="clears()">清除</button>
            <button onclick="tz()">调整</button>
        </p>
        <p>
            基准面高 <input id="txtHeight" type="text"><br>
            围墙底高 <input id="txtMinHeight" type="text"> <br>
            围墙顶高<input id="txtMaxHeight" type="text">(墙显示效果，与结算结果无关)
        </p>
        <p>
            1. 挖方量: 计算“基准面”到地表之间的凸出部分进行挖掉的体积。 <br>
            2. 填方量：计算“基准面”与“墙底部”之间的缺少部分进行填平的体积。
        </p>
    </div>
    <script type="text/javascript">

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
        const viewer = new Cesium.Viewer('map', {
        });
        // 开启帧率
        viewer.scene.debugShowFramesPerSecond = true;
        // 深度监测
        viewer.scene.globe.depthTestAgainstTerrain = true;

        // 加载默认地形
        viewer.terrainProvider = Cesium.createWorldTerrain({
            requestWaterMask: true, // 请求水掩膜以实现水体效果
            requestVertexNormals: true // 请求法线以实现光照效果
        });

        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(115.15, 27.15, 50000.0)
        });
        var measureVolume = new MeasureVolume(viewer);

        function load() {
            // 挖填方返回的数据
            measureVolume.initMeasureVolume((data) => {
                $('#txtHeight').val(data.planeHeight.toFixed(1));
                $('#txtMinHeight').val(data.wallMinHeight.toFixed(1));
                $('#txtMaxHeight').val(data.wallMaxHeight.toFixed(1));
            });
        }

        function clears() {
            measureVolume.clear();
        }

        function tz() {
            measureVolume.setParameters({
                planeHeight: Number($('#txtHeight').val()), //基准面高
                wallMinHeight: Number($('#txtMinHeight').val()), //围墙底高
                wallMaxHeight: Number($('#txtMaxHeight').val()), //围墙顶高 围墙顶高只是展示效果，与计算结果无关。
            }, (data) => {
                console.log(data)
            })
        }
    </script>
</body>

</html>